
<template>
  <div class="box">
    <div class="b1"></div>
    <div class="b2">
      <h2>购物车({{ catSize }})</h2>
      <span @click="remove()">全部删除</span>
    </div>
    <div class="b3">共{{ catSize }}件宝贝</div>
    <ul class="b4">
      <li v-for="item in cat" :key="item.cartid">
        <div class="check">
          <input
            type="checkbox"
            @change="xuanze(item.cartid, item.flag)"
            :checked="item.flag"
          />
        </div>
        <div class="img"><img :src="item.img1" alt="" /></div>
        <div class="text">
          <h5>{{ item.proname }}</h5>
          <p>
            <span class="jiage">¥{{ item.originprice }}</span>
            <span class="jishuqi">
              <button @click="addNum(item.cartid, item.num - 1), item.num--">
                -
              </button>
              <input type="text" :value="item.num" />
              <button @click="addNum(item.cartid, item.num + 1), item.num++">
                +
              </button>
            </span>
          </p>
        </div>
      </li>
    </ul>
    <div class="b44" v-if="catSize == 0">
      <div class="no">
        购物车空空如也! <br />
        快去买宝贝哇!
      </div>
    </div>
    <div class="b5" v-if="catSize != 0">
      <div>
        <div class="quanxuan">
          <input type="checkbox" @click="checkquan()" :checked="checkAll" />
          <label for="">全选</label>
        </div>
        <div class="heji">
          <p>合计</p>
          <span>{{ heji }}</span>
          <button @click="jiesuan">结算</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cat: [],
      catSize: 0,
      checkAll: null,
      heji: 0,
    };
  },
  props: {},
  methods: {
    //添加订单
    jiesuan() {
      axios
        .post("http://121.89.205.189:3000/api/order/addOrder", {
          token: sessionStorage.getItem("token"),
          userid: sessionStorage.getItem("userid"),
        })
        .then((res) => {
          // 跳订单填写
          this.$router.push({
            name: "dingdantianxie",
            query: {
              time: res.data.time,
            },
          });
        });
    },
    //获取
    getCat() {
      axios
        .post("http://121.89.205.189:3000/api/cart/list", {
          token: sessionStorage.getItem("token"),
          userid: sessionStorage.getItem("userid"),
        })
        .then((res) => {
          if (res.data.code != 200) {
            this.catSize = 0;
            this.cat = [];
            return;
          }
          this.catSize = 0;
          this.cat = res.data.data;
          this.cat.forEach((item) => {
            this.catSize += item.num;
          });
          this.qxma();
        });
    },
    //加减
    addNum(id, n) {
      if (n <= 0) {
        axios
          .post("http://121.89.205.189:3000/api/cart/remove", {
            token: sessionStorage.getItem("token"),
            cartid: id,
          })
          .then((res) => {
            this.getCat();
          });
        return;
      }
      axios
        .post("http://121.89.205.189:3000/api/cart/updatenum", {
          token: sessionStorage.getItem("token"),
          cartid: id,
          num: n,
        })
        .then((res) => {
          console.log(res);
          this.getCat();
        });
    },
    //单选
    xuanze(id, check) {
      check = !check;
      axios
        .post("http://121.89.205.189:3000/api/cart/selectone", {
          token: sessionStorage.getItem("token"),
          cartid: id,
          flag: check,
        })
        .then((res) => {
          this.getCat();
        });
    },
    //全选
    checkquan() {
      this.checkAll = !this.checkAll;

      axios
        .post("http://121.89.205.189:3000/api/cart/selectall", {
          token: sessionStorage.getItem("token"),
          userid: sessionStorage.getItem("userid"),
          type: this.checkAll,
        })
        .then((res) => {
          this.getCat();
        });
    },
    // 一进来选中查看是否全选
    qxma() {
      let arr = this.cat.every((item) => {
        return item.flag == true;
      });
      this.checkAll = arr;
    },
    //删除
    remove() {
      axios
        .post("http://121.89.205.189:3000/api/cart/removeall", {
          token: sessionStorage.getItem("token"),
          userid: sessionStorage.getItem("userid"),
        })
        .then((res) => {
          console.log(res);
          this.getCat();
        });
    },
  },
  mounted() {
    this.getCat();
    this.$emit("fanhui", 2);
  },
  computed: {},
  watch: {
    cat() {
      if (!this.cat) return;
      this.heji = 0;
      this.cat.forEach((item) => {
        if (item.flag) {
          this.heji += item.num * item.originprice;
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
.box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  > .b1 {
    width: 100%;
    height: 2rem;
    background: orange;
  }
  > .b2 {
    width: 100%;
    height: 0.52rem;
    display: flex;
    justify-content: space-between;
    color: white;
    line-height: 0.52rem;
    margin-top: -55%;
    > h2 {
      padding-left: 0.12rem;
    }
    > span {
      padding-right: 0.12rem;
    }
  }
  > .b3 {
    color: white;
    width: 100%;
    padding-left: 0.17rem;
    box-sizing: border-box;
  }
  > .b4 {
    width: 3.5rem;
    display: flex;
    flex-direction: column;
    margin-top: 0.2rem;
    margin-bottom: 1.15rem;
    > li {
      width: 100%;
      height: 1.57rem;
      border-radius: 0.15rem;
      background: white;
      margin-top: 0.15rem;
      display: flex;
      > .check {
        width: 0.45rem;
        display: flex;
        justify-content: center;
        align-items: center;
        > input {
          width: 0.2rem;
          height: 0.2rem;
        }
      }
      .img {
        width: 0.9rem;
        display: flex;
        justify-content: center;
        align-items: center;
        > img {
          width: 0.9rem;
          height: 0.9rem;
        }
      }
      .text {
        width: 2rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0 0.15rem;
        > h5 {
          width: 100%;
          height: 0.7rem;
        }
        > p {
          width: 100%;
          display: flex;
          justify-content: space-between;
          > .jiage {
            width: 0.3rem;
            color: red;
          }
          > .jishuqi {
            width: 0.87rem;
            height: 0.22rem;
            display: flex;
            > input {
              width: 0.4rem;
              border-top: 1px solid rgb(222, 219, 219);
              border-bottom: 1px solid rgb(222, 219, 219);
              border-left: 0 solid rgb(222, 219, 219);
              border-right: 0 solid rgb(222, 219, 219);
              text-align: center;
              color: rgb(106, 106, 106);
            }
            > button {
              width: 0.22rem;
              border: none;
              border: 1px solid rgb(222, 219, 219);
              background: white;
              color: rgb(222, 219, 219);
            }
          }
        }
      }
    }
  }
  > .b5 {
    width: 100%;
    height: 1rem;
    display: flex;
    background: white;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    left: 0;
    // border: 1px solid #ccc;
    box-sizing: border-box;
    > div {
      width: 100%;
      height: 0.44rem;
      display: flex;
      justify-content: space-between;
      > .quanxuan {
        width: 0.6rem;
        justify-content: center;
        display: flex;
        align-items: center;
        margin-left: 0.15rem;
        > input {
          width: 0.2rem;
          height: 0.2rem;
        }
        > label {
          margin-left: 0.08rem;
        }
      }
      > .heji {
        // width: 1.6rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-right: 0.15rem;
        > span {
          font-size: 0.14rem;
          color: #ff5000;
        }
        > button {
          width: 0.84rem;
          height: 0.3rem;
          border-radius: 0.55rem;
          background-image: linear-gradient(90deg, #ff9000 0%, #ff5000 98%);
          font-size: 15px;
          color: white;
          border: none;
          margin-left: 0.1rem;
        }
      }
    }
  }
}
.b44 {
  background: rgb(0, 191, 255);
  width: 100%;
  height: 3rem;
  text-align: center;
  color: rgb(12, 1, 16);
  line-height: 1.5rem;
  font-size: 0.42rem;
  background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fa4064bdab5f6c800ed664014f3eb7d13a4dd25b3138d0-hYHe07_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668879998&t=5d0a883302d153a74813714ed30b2ac6);
  margin-top: -35%;
  background-size: 100% 100%;
}
</style>